<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.tradingDayArray"
        value-format="yyyy-MM-dd"
        type="daterange"
        class="filter-item"
        range-separator="To"
        start-placeholder="Start time"
        end-placeholder="End time"
      />

      <el-select
        v-model="valueAccountName"
        class="filter-item"
        clearable
        placeholder="account_name"
      >
        <el-option
          v-for="item in options.account_names"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >QueryDaily
      </el-button
      >
      <el-date-picker
        v-model="newQuery.tradingDay"
        value-format="yyyy-MM-dd"
        type="date"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleQueryIntraday"
      >QueryIntraday
      </el-button
      >
      <el-select
        v-model="valueSymbolsFactors"
        class="filter-item"
        clearable
        placeholder="symbol/factor"
      >
        <el-option
          v-for="item in options.symbolNames"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleQueryFactor"
      >QuerySymbol-Factor
      </el-button>
    </div>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-container">
          <div class="filter-container">
          </div>
          <line-chart
            :chart-data="dailyChartData"
            :show-type="dailyChartType"
            :title="dailyChartTitle"
            :y2-list="['Unnamed: 0']"
            @dayChartClick="handleDailyChartClick"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-container">
          <div class="filter-container">
          </div>
          <line-chart
            :chart-data="timeChartData"
            :y2-list="['Unnamed: 0']"
          />
        </div>
      </el-col>
      <!--      <el-col :xs="24" :sm="24" :lg="12">-->
      <!--        <div class="chart-container">-->
      <!--          <div class="filter-container">-->
      <!--            <el-switch-->
      <!--              v-model="intradayChartType"-->
      <!--              active-text="single"-->
      <!--              inactive-text="accumulated"-->
      <!--            />-->
      <!--          </div>-->
      <!--          <line-chart-->
      <!--            :chart-data="intradayChartData"-->
      <!--            :show-type="intradayChartType"-->
      <!--            :title="intradayChartTitle"-->
      <!--          />-->
      <!--        </div>-->
      <!--      </el-col>-->
      <el-col :xs="24" :sm="24" :lg="24"></el-col>
    </el-row>
    <!--    <el-row :gutter="32">-->
    <!--      <el-col :xs="24" :sm="24" :lg="12">-->
    <!--        <div class="chart-container">-->
    <!--          <div class="filter-container">-->
    <!--            <el-switch-->
    <!--              v-model="dailySymbolChartType"-->
    <!--              active-text="single"-->
    <!--              inactive-text="accumulated"-->
    <!--            />-->
    <!--          </div>-->
    <!--          <line-chart-->
    <!--            :chart-data="dailySymbolChartData"-->
    <!--            :show-type="dailySymbolChartType"-->
    <!--            :title="dailySymbolChartTitle"-->
    <!--          />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="12">-->
    <!--        <div class="chart-container">-->
    <!--          <div class="filter-container">-->
    <!--            <el-switch-->
    <!--              v-model="intradaySymbolChartType"-->
    <!--              active-text="single"-->
    <!--              inactive-text="accumulated"-->
    <!--            />-->
    <!--          </div>-->
    <!--          <line-chart-->
    <!--            :chart-data="intradaySymbolChartData"-->
    <!--            :show-type="intradaySymbolChartType"-->
    <!--            :title="intradaySymbolChartTitle"-->
    <!--          />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="24"></el-col>-->
    <!--    </el-row>-->

    <el-col :xs="24" :sm="24" :lg="24">
      <el-table v-loading="listLoading" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                element-loading-text="正在查询中。。。" fit highlight-current-row>
        <el-table-column v-for="(item, index) in gridTableHeader" :key="index" :prop="index" :label="item" sortable
                         show-overflow-tooltip/>
      </el-table>
      <div style="text-align: right; margin-top: 20px;">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-col>
  </div>
</template>
<script>
import {
  api_account_names,
  api_symbols_factors,
  pnl_dcmp_daily_account,
  pnl_dcmp_intraday_account,
  pnl_dcmp_daily_symbol_account,
  pnl_dcmp_intraday_symbol_account
} from '@/api/pnl_analysis'
import LineChart from './components/LineChart.vue'

export default {
  components: { LineChart },
  data() {
    return {
      items: [],
      charIndex: 0,
      listLoading: false,
      tableData: [],
      currentPage: 1,
      pagesize: 20,
      dailySymbolChartData: {},
      dailySymbolChartType: false,
      dailySymbolChartTitle: '',

      intradaySymbolChartData: {},
      intradaySymbolChartType: false,
      intradaySymbolChartTitle: '',

      dailyChartData: {},
      timeChartData: {},
      dailyChartType: false,
      dailyChartTitle: '',

      intradayChartData: {},
      intradayChartType: false,
      intradayChartTitle: '',
      newQuery: {
        tradingDay: ''
      },
      intradaySymbolQuery: {
        tradingDay: '',
        valueSymbol: ''
      },
      listQuery: {
        tradingDayArray: [],
        valueAccountName: ''
      },
      listSymbolQuery: {
        tradingDayArray: [],
        valueAccountName: '',
        valueSymbol: ''
      },
      query: {},
      queryintra: {},
      options: { account_names: {}, symbolNames: {} },
      //valueSymbol: "",
      valueAccountId: '',
      valueSymbolType: '',
      valueAccountName: '',
      valueSymbolsFactors: '',
      t: 1
    }
  },
  mounted() {
    // console.log(this.$route.query.account)
    // console.log(this.$route.query.a)
    // console.log(this.$route.query.a)
    // console.log(this.$route.query.a)
    // console.log(this.$route.query.a)
    this.get_account_names()
    this.get_symbols_factors()
    this.get_account_daily_pnl()
    this.valueAccountName = this.$route.params.account
    this.valueSymbolsFactors = this.$route.params.symbol
    // this.listQuery.tradingDayArray = ['20201-01-01', '2021-01-

  },
  methods: {
    get_account_names() {
      api_account_names()
        .then((response) => {
          console.log('account_names_fetched')
          // console.log(response.data)
          this.options.account_names = response.data
        })
        .catch((e) => {
          console.log(e)
        })
    },
    get_symbols_factors() {
      api_symbols_factors()
        .then((response) => {
          console.log('symbols_factors_fetcher')
          // console.log(response.data)
          this.options.symbolNames = response.data
        })
        .catch((e) => {
          console.log(e)
        })
    },
    handleQueryFactor() {
      this.query = {}
      this.query = JSON.parse(JSON.stringify(this.listQuery))
      if (
        this.query.tradingDayArray &&
        this.query.tradingDayArray.length === 2
      ) {
        this.query.beginDate = this.query.tradingDayArray[0]
        this.query.endDate = this.query.tradingDayArray[1]
      } else {
        this.query.beginDate = null
        this.query.endDate = null
      }
      this.query.accountName = this.valueAccountName
      this.query.symbol = this.valueSymbolsFactors
      delete this.query.tradingDayArray
      this.get_account_symbol_daily_pnl()
      // this.dailySymbolChartTitle =
      //   this.query.accountName +
      //   "_" +
      //   this.query.symbol +
      //   this.query.beginDate +
      //   "-" +
      //   this.query.endDate;
      this.queryintra = {}
      this.queryintra = JSON.parse(JSON.stringify(this.newQuery))
      this.queryintra.accountName = this.valueAccountName
      this.queryintra.symbol = this.valueSymbolsFactors
      // this.intradaySymbolChartTitle =
      //   this.queryintra.accountName +
      //   "_" +
      //   this.queryintra.symbol +
      //   this.queryintra.tradingDay;
      this.get_account_symbol_intraday_pnl()
    },
    handleQueryIntraday() {
      this.queryintra = {}
      this.queryintra = JSON.parse(JSON.stringify(this.newQuery))
      this.queryintra.accountName = this.valueAccountName
      //this.queryintra.tradingDay = this.valueAccountName;
      // this.intradayChartTitle =
      //   this.queryintra.accountName + "_" + this.queryintra.tradingDay;
      this.get_account_intraday_pnl()
    },
    handleFilter() {
      this.query = {}
      this.query = JSON.parse(JSON.stringify(this.listQuery))
      if (
        this.query.tradingDayArray &&
        this.query.tradingDayArray.length === 2
      ) {
        this.query.beginDate = this.query.tradingDayArray[0]
        this.query.endDate = this.query.tradingDayArray[1]
      } else {
        this.query.beginDate = null
        this.query.endDate = null
      }
      console.log('logging this query')
      console.log(this.query)
      this.query.accountName = this.valueAccountName
      // this.dailyChartTitle =
      //   this.query.accountName +
      //   "_" +
      //   this.query.symbol +
      //   this.query.beginDate +
      //   "-" +
      //   this.query.endDate;
      delete this.query.tradingDayArray
      this.get_account_daily_pnl()
    },
    handleDailyChartClick(data) {
      console.log('logging  handleDailyChartClick')
      console.log(data)
      pnl_dcmp_intraday_account(this.queryintra)
        .then((response) => {
          console.log('get_account_intraday_pnl')
          console.log(response.data)
          this.timeChartData = response.data
        })
        .catch(() => {
        })
    },
    // handleIntradayChartRangeChange(data) {
    //   console.log("logging this query");
    //   console.log(data);
    // },
    get_account_daily_pnl() {
      console.log('get daily')
      console.log(this.query)
      pnl_dcmp_daily_account(this.query)
        .then((response) => {
          console.log('get_account_daily_pnl')
          console.log(response.data)
          this.dailyChartData = response.data
        })
        .catch(() => {
        })
    },
    get_account_intraday_pnl() {
      console.log('get intraday')
      console.log(this.queryintra)
      pnl_dcmp_intraday_account(this.queryintra)
        .then((response) => {
          console.log('get_account_intraday_pnl')
          console.log(response.data)
          this.intradayChartData = response.data
        })
        .catch(() => {
        })
    },
    get_account_symbol_daily_pnl() {
      console.log('get daily symbol')
      console.log(this.query)
      pnl_dcmp_daily_symbol_account(this.query)
        .then((response) => {
          console.log('get_account_symbol_daily_pnl')
          console.log(response.data)
          this.dailySymbolChartData = response.data
        })
        .catch(() => {
        })
    },
    get_account_symbol_intraday_pnl() {
      console.log('get intraday symbol')
      console.log(this.queryintra)
      pnl_dcmp_intraday_symbol_account(this.queryintra)
        .then((response) => {
          console.log('get_account_symbol_intraday_pnl')
          console.log(response.data)
          this.intradaySymbolChartData = response.data
        })
        .catch(() => {
        })
    },
    addChart() {
      console.log(this.dailyChartData)
      pnl_dcmp_daily_account(this.query)
        .then((response) => {
          this.items.push({
            dailyChartData: response.data,
            dailyChartTitle: this.valueAccountName + this.newQuery.tradingDay,
            index: this.charIndex++
          })
        })
        .catch(() => {
        })
      console.log(this.items)
    },
    delItem(index) {
      console.log('删除', index)
      console.log(this.items)
      console.log(this.items.splice(index, 1))
    },
    clear() {
      this.items = {}
    },
    handleSizeChange(size) {
      this.pagesize = size
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.chart-container {
  background-color: rgb(240, 242, 245);
  padding: 16px 16px 0;
  margin-bottom: 32px;
}

.line-chart {
  margin-top: 100px;
}

.ccc {
  padding-top: 50px;
}
</style>
